<template>
	<div class="user-team">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				我的团队
			</div>
		</div>
		<Scroll :on-refresh="onRefresh" 
			:on-infinite="onInfinite" 
			:loadingText = "loadingText" 
			@topshow="topshow"
			:scrollNum="scrollNum"
		>
			<div class="ut-content">
				<div class="ut-c-leader"
					v-if="list.avatar"
				>
					<h1 class="border-1px">你的推荐人</h1>
					<div class="ut-cl-content">
						<img :src="list.avatar" />
						<div class="ut-cl-right">
							<p>{{list.nickname}}</p>
							<span>{{list.mobile}}</span>
						</div>
					</div>
				</div>
				<div class="ut-c-content"
					id="ut-c-content"
				>
					<div class="ut-cc-header border-1px">
						<div class="ut-cc-item"
							@click="change(1)"
							:class="{ active: this.type == 1 }"
						>
							<p class="num">总人数</p>
							<p>{{list.count}}人</p>
						</div>
						<div class="ut-cc-item"
							@click="change(2)"
							:class="{ active: this.type == 2 }"
						>
							<p class="num">直属代言人</p>
							<p>{{list.spokesperson}}人</p>
						</div>
					</div>
					<div class="ut-cc-nav">
						<div class="ut-cn-item borderight-1px"
							@click="change(3)"
							:class="{ active: this.type == 3 }"
						>
							<p>{{list.tcount}}人</p>
							<p>今日</p>
						</div>
						<div class="ut-cn-item borderight-1px"
							@click="change(4)"
							:class="{ active: this.type == 4 }"
						>
							<p>{{list.ycount}}人</p>
							<p>昨日</p>
						</div>
						<div class="ut-cn-item borderight-1px"
							@click="change(5)"
							:class="{ active: this.type == 5 }"
						>
							<p>{{list.yiCount}}人</p>
							<p>直属粉丝</p>
						</div>
						<div class="ut-cn-item"
							@click="change(6)"
							:class="{ active: this.type == 6 }"
						>
							<p>{{list.erCount}}人</p>
							<p>直属粉丝下级</p>
						</div>
					</div>
				</div>
				<div class="ut-sea">
					<input type="text" 
						placeholder="请输入粉丝手机号"
						v-model.trim="mobile"
						@blur="sea()"
						@keyup.delete="sea()"
					>
					<i class="iconfont"
						@click="sea()"
					>&#xe612;</i>
				</div>
				<div class="ut-agent"
					id="ut-agent"
				>
					<div class="ut-a-items"
						v-for="(team, index) in teamList"
						@click="goDetail(team)"
					>
						<div class="ut-a-item border-1px">
							<div class="ut-at-left">
								<img v-lazy="team.avatar" />
								<div class="ut-at-right">
									<p class="name">{{team.nickname}}</p>
									<p class="lv">{{team.type}}</p>
									<p class="time">{{team.createtime}}</p>
								</div>
							</div>						
							<div class="ut-at-item">
								<p>推荐人数：{{team.num}}</p>
								<p>订单数量：{{team.order_num}}</p>
							</div>
						</div>
						<div class="ut-a-bottom">
							<div class="ut-ai-item">
								<p>上月结算</p>
	                            <span>{{team.last_income}}</span>
							</div>
							<div class="ut-ai-item">
								<p>本月预估</p>
	                            <span>{{team.predict_income}}</span>
							</div>
							<div class="ut-ai-item">
								<p>今日预估</p>
	                            <span>{{team.today_commission}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Scroll>
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import Scroll from '../components/my_scroll.vue'
	import GoTop from '../components/GoTop.vue'
	export default{
		components: {
			GoTop,
			Scroll
		},
		data(){
			return{
				topclass: false,
				scrollNum: 2, 
				loadingText: '加载中...',
				page: 1,
				type: 1,
				mobile: '',
				list: [],
				teamList: []
			}
		},
		mounted(){
			axios.post(Http.FANS)
			.then( res => {
				var ret = res.data;
				this.list = ret.data;
			})
			this.getData();
			window.addEventListener('scroll', this.handleScroll);
		},
		methods: {
			topshow: function(a){
		    	this.topclass = a;
		    },
			onRefresh(done) {
            	document.getElementById('help').style.display="none";
	            this.getData();
	            done();
	            Toast({
				    message: '刷新完成',
				    position: 'bottom',
				    duration: 500
				});     
		    },
		    onInfinite(done) {
		    	document.getElementById('help').style.display="none";
		    	document.querySelector('.load-more').style.display = 'block';
		    	let vm = this;
		    	var params = new URLSearchParams();
				params.append('type', this.type);
				params.append('page', this.page);
				params.append('mobile', this.mobile);
				axios.post(Http.FANSLIST,params).then( res =>{
					var ret = res.data;
					var arr = ret['data'];
					vm.teamList = vm.teamList.concat(arr);
					if (arr.length > 9) {
						vm.page ++;
						// vm.$el.querySelector('.load-more').style.display = 'none';
						done() // call done
					}else{
						Toast('没有更多数据')
						vm.loadingText = "加载完毕";
						setTimeout(hideLoad, 2000);
						function hideLoad (){
							document.querySelector('.load-more').style.display = 'none';
						}
					}
				})
		    },
			goTop: function(){
                document.getElementById("ut-c-content").scrollIntoView();
            },
			handleScroll: function(){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var scrollHeight = document.querySelector('#ut-agent').scrollHeight;
                var offsetTop = document.querySelector('#ut-agent').offsetTop;
                if(scrollTop > 850){
                	this.topclass = true;
                }else if(scrollTop < 850){
                	this.topclass = false;
                }
                if( scrollTop > offsetTop - 30 ){
                    this.fixclass = true;
                    this.marginTop = document.querySelector('#ut-agent').offsetHeight + 'px';
                }else{
                    this.fixclass = false;
                    this.marginTop = 0;
                }
                if (scrollHeight - scrollTop < 350){
                	this.page++;
                	document.getElementById('help').style.display="none";
                	var params = new URLSearchParams();
	                params.append('type', this.type);
					params.append('page', this.page);
					params.append('mobile', this.mobile);
	                axios.post(Http.FANSLIST,params)
	                .then( res => {
	                    var ret = res.data;
						this.tList = ret.data;
						if(ret.code == 1){
							this.teamList = this.teamList.concat(this.tList);	
						}
						                    
	                })
                }
            },
			change(id){
				this.page = 1;
				if(id == 1 ){
					this.type = 1;
					this.getData() 
				}else if( id == 2 ){
					this.type = 2;
					this.getData()
				}else if( id == 3 ){
					this.type = 3;
					this.getData()
				}else if( id == 4 ){
					this.type = 4;
					this.getData()
				}else if( id == 5 ){
					this.type = 5;
					this.getData()
				}else if( id == 6 ){
					this.type = 6;
					this.getData()
				}
			},
			goDetail: function(team){
				this.$router.push({
					path: '/user/team/detail/' + team.id,
					query: {
						avatar: team.avatar,
						nickname: team.nickname
					}
				})
			},
			sea: function(){
				this.getData();
			},
			getData(){
                document.getElementById('help').style.display="none";
				var params = new URLSearchParams();
				params.append('type', this.type);
				params.append('page', this.page);
				params.append('mobile', this.mobile);
				axios.post(Http.FANSLIST, params)
				.then( res => {
					var ret = res.data;
					this.teamList = ret.data;
					this.page = 2;
				})
			}
		},
		destroyed () {//离开该页面需要移除这个监听的事件
            window.removeEventListener('scroll', this.handleScroll)
        }
	}
</script>
<style lang="scss" scoped>
	.user-team{
		.ut-content{
			background: #f1f7f8;
			min-height: 12rem;
			padding: 0 0.24rem;
			padding-top: 0.2rem;
			.ut-c-leader{
				width: 100%;
				background: #fff;
				border-radius: 0.2rem;
				h1{
					height: 0.66rem;
					line-height: 0.66rem;
					text-align: left;
					text-indent: 0.2rem;
					font-size: 0.26rem;
					color: rgb(255,101,68);
				}
				.ut-cl-content{
					display: flex;
					padding: 0.2rem;
					img{
						margin-right: 0.2rem;
						width: 1rem;
						height: 1rem;
						border-radius: 1rem;
					}
					.ut-cl-right{
						text-align: left;
						font-size: 0.26rem;
						p{
							margin-bottom: 0.2rem;
							font-weight: 700;
						}
						span{
							color: #666;
						}
					}
				}
			}
			.ut-c-content{
				margin-top: 0.2rem;
				width: 100%;
				border-radius: 0.2rem;
				background: #fff;
				.ut-cc-header{
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding-top: 0.2rem;
					padding-bottom: 0.2rem;
					.ut-cc-item{
						width: 1.8rem;
						height: 1.8rem;
						border-radius: 1.8rem;
						border: 0.1rem solid #f5f5f5;
						&.active{
							border: 0.1rem solid #f79e18;
							color: #ff3d00;
						}
						.num{
							margin-top: 0.5rem;
						}
					}
				}
				.ut-cc-nav{
					display: flex;
					align-items: center;
					padding: 0.2rem 0;
					.ut-cn-item{
						flex: 0 0 25%;
						&.active{
							color: #ff3d00;
						}
					}
				}
			}
			.ut-sea{
				position: relative;
				margin-top: 0.2rem;
				width: 92%;
				padding: 0.3rem 4%;
				border-radius: 0.2rem;
				background: #fff;
				i{
					position: absolute;
					top: 0rem;
					right: 0rem;
					width: 1.4rem;
					height: 1.1rem;
					line-height: 1.1rem;
					font-size: 0.3rem;
					color: #666;
				}
				input{
					width: 100%;
					height: 0.5rem;
					line-height: 0.5rem;
					background: #f5f5f5;
					border-radius: 0.5rem;
					text-indent: 0.2rem;
				}
			}
			.ut-agent{
				.ut-a-items{
					margin-top: 0.2rem;
					width: 100%;
					background: #fff;
					border-radius: 0.2rem;
					padding-bottom: 0.1rem;
					.ut-a-item{
						margin: 0 0.2rem;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0.2rem 0;
						.ut-at-left{
							display: flex;
							img{
								margin-right: 0.2rem;
								width: 1rem;
								height: 1rem;
								border-radius: 1rem;
							}
						}
						
						.ut-at-right{
							text-align: left;
							.name{
								font-weight: bold;
								color: #333;
								font-size: 0.26rem;
							}
							.time{
								font-size: 0.20rem;
							}
							.lv{
								padding: 0.04rem 0;
								width: 1rem;
								border-radius: 0.04rem;
								background: #f5f5f5;
								text-align: center;
								margin: 0.08rem 0;
								font-size: 0.20rem;
							}
						}

						.ut-at-item{
							border-left: 0.01rem solid #e1e1e1;
							padding-left: 0.2rem;
						}
						
					}
					.ut-a-bottom{
						display: flex;
						align-items: center;
						justify-content: space-around;
						margin: 0.2rem 0;
						.ut-ai-item{
							font-size: 0.24rem;
							p{
								margin-bottom: 0.1rem;
							}
							span{
								color: $color;
							}
						}
					}
				}
			}
		}
	}
</style>